<template>
    <div 
        class="le-select-dropdown le-popper"
        :style="{ minWidth: minWidth }">
        <slot></slot>
    </div>
</template>

<script>
import Popper from '../../utils/vue-popper';
    export default {
        name: 'LeSelectDropDown',
        componentName: 'LeSelectDropDown',
        mixins: [Popper],
        props: {
           placement: {
              default: 'bottom-start'
            },
            boundariesPadding: {
                default: 0
            },
            popperOptions: {
                default() {
                    return {
                        gpuAcceleration: false
                    };
                }
            },
            visibleArrow: {
                default: true
            },
            appendToBody: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                minWidth: ''
            }
        },
        computed: {
            popperClass() {
                return this.$parent.popperClass;
            }
        },
        watch: {
            '$parent.inputWidth'() {
                this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px';
            }
        },
        mounted() {
            // this.referenceElm = this.$parent.$refs.reference.$el;
            // this.$parent.popperElm = this.popperElm = this.$el;
            // this.$on('updatePopper', () => {
            //     if (this.$parent.visible) this.updatePopper();
            // });
            // this.$on('destroyPopper', this.destroyPopper);
        }
    }
</script>

<style lang="scss" scoped>
.le-select-dropdown {
  position: absolute;
  z-index: 9999;
  border: 1px solid #ccc;
  border-radius: 15px;
  background-color: #ccc;
  box-shadow: 5px 5px 5px #ccc;
  box-sizing: border-box;
  margin: 5px 0;
}
</style>